<template>
  <div class="table-main">
    <div class="query-content">
      <el-form :model="formInline" :rules="formRules" class="demo-form-inline" label-width="180px" ref="recordFormRef">
        <el-row :gutter="20" class="form-row">
          <el-col :span="12">
            <el-form-item label="标准名称" prop="bzmc">
              <el-select v-model="formInline.bzmc" placeholder="请选择标准名称" clearable>
                <el-option v-for="item in bzmcOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名:" prop="consultant">
              <el-input v-model="formInline.consultant" placeholder="姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子邮件:" prop="contactEmail">
              <el-input v-model="formInline.contactEmail" placeholder="电子邮件" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系地址:" prop="contactAddress">
              <el-input v-model="formInline.contactAddress" placeholder="联系地址" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话:" prop="contactTel">
              <el-input v-model="formInline.contactTel" placeholder="联系电话" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内容:" prop="consultContent">
              <el-input v-model="formInline.consultContent" placeholder="内容" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12" style="display: flex">
            <el-form-item label="验证码:" prop="verifyCode">
              <el-input v-model="formInline.verifyCode" />
            </el-form-item>
            <img :src="formInline.verifyCodeImg" class="verifyCodeImg" style="cursor: pointer" @click="genCode" />
          </el-col>
          <el-col :span="12" class="form-btn-group">
            <el-form-item>
              <el-button type="primary" @click="handleSave">保存</el-button>
              <el-button @click="handleReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from "vue";
  import { ElForm, ElMessage, ElMessageBox } from "element-plus";
  import { getServerUrl } from "@/utils/url";
  const serverUrl = getServerUrl();
  import axios from "axios";
  // import { get } from "node_modules/axios/index.cjs";
  const formInline = reactive({
    bzmc: "",
    consultant: "",
    contactEmail: "",
    contactAddress: "",
    contactTel: "",
    consultContent: "",
    verifyCode: "",
    verifyCodeImg: "",
    // timestamp:'',
  });

  const recordFormRef = ref(null);
  const bzmcOptions = ref([]);

  const small = ref(false);

  const formRules = reactive({
    bzmc: [{ required: true, message: "请输入标准名称", trigger: "blur" }],
    consultant: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    contactEmail: [
      { required: true, message: "请输入电子邮件", trigger: "blur" },
      {
        pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
        message: "请输入正确的邮箱地址",
        trigger: "blur",
      },
    ],
    contactAddress: [{ required: true, message: "请输入联系地址", trigger: "blur" }],
    contactTel: [
      { required: true, message: "请输入联系电话", trigger: "blur" },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: "请输入正确的手机号",
        trigger: "blur",
      },
    ],
    consultContent: [{ required: true, message: "请输入内容", trigger: "blur" }],
    verifyCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
  });

  const alltimestamp = ref(null);
  const genCode = () => {
    const codeLength = "4";
    alltimestamp.value = Math.random();
    formInline.verifyCodeImg = serverUrl + `consultReply/ImageCode/${codeLength}/${alltimestamp.value}`;
  };
  const getBZList = async () => {
    const response = await axios.get(serverUrl + "consultReply/listStandard");
    bzmcOptions.value = response.data.data;
  };

  interface ApiResponse {
    code: number;
    message: string;
    data: any; // 根据实际数据结构替换为具体类型
  }

  const handleSave = async () => {
    recordFormRef.value.validate(async valid => {
      if (valid) {
        try {
          const response = await axios.post<ApiResponse>(serverUrl + "consultReply/insert", {
            projectInfoId: formInline.bzmc,
            consultant: formInline.consultant,
            contactEmail: formInline.contactEmail,
            contactAddress: formInline.contactAddress,
            contactTel: formInline.contactTel,
            consultContent: formInline.consultContent,
            timestamp: alltimestamp.value,
            verifyCode: formInline.verifyCode,
          });

    
          if (response.data.code === "200") {
            ElMessage.success("提交成功");
            formInline.bzmc = "";
            formInline.consultant = "";
            formInline.contactEmail = "";
            formInline.contactAddress = "";
            formInline.contactTel = "";
            formInline.verifyCode = "";
            formInline.consultContent = "";
            genCode();
          } else {
            ElMessage.error("提交失败,请稍后重试");
          }
        } catch (error) {
          if (error.response) {
            const errorData = error.response.data;
            ElMessage.error(errorData.message);
          } else {
            ElMessage.error("网络异常，请稍后重试");
          }
        }
      } else {
        console.log("error submit!");
      }
    });
  };

  // const handleSave = async () => {
  //   recordFormRef.value.validate(valid => {
  //     if (valid) {
  //       try {
  //         const res = await axios.post(serverUrl + "consultReply/insert", {
  //           projectInfoId: formInline.bzmc,
  //           consultant: formInline.consultant,
  //           contactEmail: formInline.contactEmail,
  //           contactAddress: formInline.contactAddress,
  //           contactTel: formInline.contactTel,
  //           consultContent: formInline.consultContent,
  //           timestamp: Math.random(),
  //           verifyCode: formInline.verifyCode,
  //         });
  //         if (res.data.code === "200") {
  //           ElMessage.success("提交成功");
  //           formInline.bzmc = "";
  //           formInline.consultant = "";
  //           formInline.contactEmail = "";
  //           formInline.contactAddress = "";
  //           formInline.contactTel = "";
  //           formInline.consultContent = "";
  //           formInline.verifyCode = "";
  //           formInline.verifyCodeImg = "";
  //           genCode();
  //           //  router.back();
  //         }
  //       } catch (error) {
  //         // 验证失败时的处理
  //         console.log("表单验证失败:", error);
  //         return false;
  //       }
  //     } else {
  //       console.log("error submit!");
  //       return;
  //     }
  //   });
  // }

  const handleReset = () => {
    formInline.bzmc = "";
    formInline.consultant = "";
    formInline.contactEmail = "";
    formInline.contactAddress = "";
    formInline.contactTel = "";
    formInline.verifyCode = "";
    formInline.consultContent = "";
    genCode();
  };
  onMounted(() => {
    genCode();
    getBZList();
  });
</script>

<style lang="scss" scoped>
.query-content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.verifyCodeImg {
  width: 120px;
}

:deep(.el-col-12) {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

.demo-form-inline .el-form-item {
  margin-bottom: 0;
  width: 100%;
}

:deep(.el-input) {
  width: 100%;
}

.form-btn-group {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

:deep(.el-table__empty-text) {
  color: #666;
  font-size: 16px;
  margin: 40px 0;
}
</style>
